<template>
	<view class="u-page">
		<view class="u-demo-block">
			<u-form
				:labelWidth="80"
				:model="formData"
				:rules="formRules"
				ref="form"
			>
				<!-- 输入设备号 -->
				<u-form-item
					label="设备号"
					required
					prop="machineNo"
					ref="machineNo"
				>
					<u-input
						v-model="formData.machineNo"
						disabled
					></u-input>
				</u-form-item>
				<!-- 扫描二维码 -->
				<u-form-item
					label="传票二维码"
					required
				>
					<u-input
						v-model="formData.lotInfo"
						disabled
					></u-input>
				</u-form-item>
				<u-row
					gutter="10"
				>
					<u-col span="3">
						<u-text text="lotNo: "></u-text>
					</u-col>
					<u-col span="9">
						<u-text
							type="success"
							:text="echo.lotNo"
							class="preWhite"
						></u-text>
					</u-col>
				</u-row>
				<u-row
					gutter="10"
					customStyle="margin-top: 10px"
				>
					<u-col span="3">
						<u-text text="形名: "></u-text>
					</u-col>
					<u-col span="9">
						<u-text
							type="success"
							:text="echo.productCode"
							class="preWhite"
						></u-text>
					</u-col>
				</u-row>
				<!-- 选择时间 -->
				<u-form-item
					label="日期"
					required
					prop="recordTimeDT"
					ref="recordTimeDT"
					@click="recordTimeFormClick"
				>
					<u-input
						v-model="formData.recordTimeDT"
						style="pointer-events: none"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择记录时间"
						fontSize="13px"
						color="#12569F"
					></u-input>
				</u-form-item>
				<!-- 素子1信息 -->
				<u-divider
					text="素子信息"
					lineColor="#12569F"
				></u-divider>
				<u-form-item
					label="素子批号1"
					required
					prop="chipInfo1"
					ref="chipInfo1"
				>
					<u-input
						v-model="formData.chip1Info"
						clearable
						@blur="chip1InfoBlur"
						@clear="chip1InfoClear"
					></u-input>
				</u-form-item>
				<u-row
					gutter="10"
				>
					<u-col span="3">
						<u-text
							text="素子信息1:"
							customStyle="color:#7d7d7d"
						></u-text>
					</u-col>
					<u-col span="9">
						<u-text
							type="success"
							:text="echo.chip1ProductCode"
							class="preWhite"
						></u-text>
					</u-col>
				</u-row>
				<!-- 素子2信息 -->
				<u-form-item
					label="素子批号2"
				>
					<u-input
						v-model="formData.chip2Info"
						clearable
						@blur="chip2InfoBlur"
						@clear="chip2InfoClear"
					></u-input>
				</u-form-item>
				<u-row
					gutter="10"
				>
					<u-col span="3">
						<u-text
							text="素子信息2:"
							customStyle="color:#7d7d7d"
						></u-text>
					</u-col>
					<u-col span="9">
						<u-text
							type="success"
							:text="echo.chip2ProductCode"
							class="preWhite"
						></u-text>
					</u-col>
				</u-row>
				<!-- 素子3信息 -->
				<u-form-item
					label="素子批号3"
				>
					<u-input
						v-model="formData.chip3Info"
						clearable
						@blur="chip3InfoBlur"
						@clear="chip3InfoClear"
					></u-input>
				</u-form-item>
				<u-row
					gutter="10"
				>
					<u-col span="3">
						<u-text
							text="素子信息3:"
							customStyle="color:#7d7d7d"
						></u-text>
					</u-col>
					<u-col span="9">
						<u-text
							type="success"
							:text="echo.chip3ProductCode"
							class="preWhite"
						></u-text>
					</u-col>
				</u-row>

				<u-divider
					text="良品数"
					lineColor="#12569F"
				></u-divider>
				<u-form-item
					label="1列良品数"
					prop="okCount1"
					ref="okCount1"
					@click="formData.okCount1 * 1 < 1 ? (formData.okCount1 = '') : formData.okCount1"
				>
					<u-input
						v-model="formData.okCount1"
						type="number"
						@blur="formData.okCount1 * 1 < 1 ? (formData.okCount1 = 0) : ''"
						clearable
					></u-input>
				</u-form-item>
				<u-form-item
					label="2列良品数"
					prop="okCount2"
					ref="okCount2"
					@click="formData.okCount2 * 1 < 1 ? (formData.okCount2 = '') : formData.okCount2"
				>
					<u-input
						v-model="formData.okCount2"
						type="number"
						@blur="formData.okCount2 * 1 < 1 ? (formData.okCount2 = 0) : ''"
						clearable
					></u-input>
				</u-form-item>
				<u-form-item
					label="3列良品数"
					prop="okCount3"
					ref="okCount3"
					@click="formData.okCount1 * 3 < 1 ? (formData.okCount3 = '') : formData.okCount3"
				>
					<u-input
						v-model="formData.okCount3"
						type="number"
						@blur="formData.okCount3 * 1 < 1 ? (formData.okCount3 = 0) : ''"
						clearable
					></u-input>
				</u-form-item>
				<u-form-item
					label="4列良品数"
					prop="okCount4"
					ref="okCount4"
					@click="formData.okCount4 * 1 < 1 ? (formData.okCount4 = '') : formData.okCount4"
				>
					<u-input
						v-model="formData.okCount4"
						type="number"
						@blur="formData.okCount4 * 1 < 1 ? (formData.okCount4 = 0) : ''"
						clearable
					></u-input>
				</u-form-item>
				<u-row
					gutter="10"
					class="ngEcho"
				>
					<u-col span="4">
						<u-text text="合计良品: "></u-text>
					</u-col>
					<u-col span="8">
						<text style="color: #007b43; font-size: 15px">{{ okSum }}</text>
					</u-col>
				</u-row>
			</u-form>
			<u-button
				type="primary"
				text="提交"
				customStyle="margin-top: 20px"
				:loading="submitBtn.loading"
				loadingMode="semicircle"
				@click="formSubmit"
			></u-button>
			<u-button
				type="error"
				text="删除"
				customStyle="margin-top: 20px"
				@click="formDel">
			</u-button>

			<u-calendar
				:show="show.calendar"
				:defaultDate="defaultDate"
				:minDate="minDate"
				:maxDate="maxDate"
				:closeOnClickOverlay="true"
				mode="single"
				@confirm="calendarConfirm"
				@close="calendarClose"
			></u-calendar>
		</view>
	</view>
</template>

<script>
import { getMachine4SSD1ZL } from '@/api/machine/machine.js';
import { getUSMQrType, getUSMChipQRType } from '@/api/qrtype/qrtype.js';
import { uptUsmZlRecord,getUsmZlRecordByID,delUsmZlRecord } from '@/api/usmRecord/usmZlRecord.js';

import dayjs from 'dayjs';
export default {
	data() {
		return {
			formData: {
				machineNo: '',
				lotInfo: '',
				recordTimeDT: '',
				chip1Info: '',
				chip2Info: '',
				chip3Info: '',
				okCount1: 0,
				okCount2: 0,
				okCount3: 0,
				okCount4: 0
			},
			formRules: {
				machineNo: [
					{
						type: 'string',
						required: true,
						message: '请输入设备号',
						trigger: ['blur', 'change']
					}
				],
				lotInfo: {
					type: 'string',
					required: true,
					message: '请扫描二维码',
					trigger: ['blur', 'change']
				},
				recordTimeDT: {
					type: 'string',
					required: true,
					message: '请选择日期',
					trigger: ['blur', 'change']
				},
				chip1Info: {
					type: 'string',
					required: true,
					message: '请扫描素子',
					trigger: ['blur', 'change']
				},

				okCount1: {
					type: 'number',
					required: false,
					message: '必须是数字',
					trigger: ['blur', 'change']
				},

				okCount2: {
					type: 'number',
					required: false,
					message: '必须是数字',
					trigger: ['blur', 'change']
				},

				okCount3: {
					type: 'number',
					required: false,
					message: '必须是数字',
					trigger: ['blur', 'change']
				},

				okCount4: {
					type: 'number',
					required: false,
					message: '必须是数字',
					trigger: ['blur', 'change']
				}
			},
			focus: {
				machineNo: false,
				lotInfo: false
			},
			echo: {
				lotNo: '',
				productCode: '',
				chip1LotNo: '',
				chip1ProductCode: '',
				chip2LotNo: '',
				chip2ProductCode: '',
				chip3LotNo: '',
				chip3ProductCode: ''
			},
			disabled: {
				machineNo: false
			},
			show: {
				otherItem: false,
				lotInfo: false,
				calendar: false,
				chipInfo: false
			},
			timer: {
				lotInfo: 0,
				machineNo: 0
			},
			qrCode: {
				lotNoFrom: 0,
				lotNoLength: 0,
				pnFrom: 0,
				pnLength: 0,
				chipLotNoFrom: 0,
				chipLotNoLength: 0,
				chipPnFrom: 0,
				chipPnLength: 0
			},
			defaultDate: dayjs().format('YYYY-MM-DD'),
			minDate: dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
			maxDate: dayjs().add(1, 'day').format('YYYY-MM-DD'),
			submitBtn: {
				loading: false
			},
			prePageOption:{},
		};
	},
	onLoad(option) {
		this.prePageOption = option
		const that = this
		getUsmZlRecordByID(this.prePageOption)
			.then(res=>{
				this.formData.machineNo=res.data.machineNo
				this.echo.lotNo=res.data.lotNo
				this.echo.productCode=res.data.productCode
				this.formData.recordTimeDT=res.data.recordTimeDT
				this.echo.chip1ProductCode=res.data.chipRecord1
				this.echo.chip2ProductCode=res.data.chipRecord2
				this.echo.chip3ProductCode=res.data.chipRecord3
				this.formData.okCount1 = res.data.okCount1
				this.formData.okCount2=res.data.okCount2
				this.formData.okCount3=res.data.okCount3
				this.formData.okCount4=res.data.okCount4
			})
			.catch(err=>{
				uni.showToast({
					title: err.msg||err.message,
					icon: 'error',
					duration: 2000,
				})
				uni.$u.sleep(2000).then(()=>{
					uni.navigateBack()
				})
			})
	},
	onShow() {
		this.$nextTick(() => {
			this.formData.recordTimeDT = dayjs().format('YYYY-MM-DD');
			if (dayjs().hour() < 7) {
				this.formData.recordTimeDT = dayjs().subtract(1, 'day').format('YYYY-MM-DD');
			}
		});
	},
	onUnload() {
		//清除计数器
		clearTimeout(this.timer.lotInfo);
		clearTimeout(this.timer.machineNo);
	},
	onNavigationBarButtonTap(e) {
		if (e.type === 'menu') {
			this.showMenuDrawer();
		} else if (e.type === 'home') {
			uni.reLaunch({
				url: '/pages/index/index'
			});
		}
	},
	computed: {
		okSum() {
			return this.formData.okCount1 * 1 + this.formData.okCount2 * 1 + this.formData.okCount3 * 1 + this.formData.okCount4 * 1;
		}
	},
	methods: {
		machineFocus() {
			uni.$u.sleep(100).then(() => {
				// #ifdef APP-PLUS
				uni.hideKeyboard();
				// #endif
			});
		},
		machineNoBlur() {
			this.timer.machineNo = setTimeout(() => {
				this.$refs.form.validateField('machineNo');
				if (uni.$u.test.isEmpty(this.formData.machineNo)) return;
				getMachine4SSD1ZL({ machineNo: this.formData.machineNo })
					.then((res) => {
						this.disabled.machineNo = true;
						this.show.otherItem = true;
						this.focus.machineNo = false;
						this.focus.lotInfo = true;
					})
					.catch((err) => {
						uni.$u.toast(err.msg || err.message);
					});
			}, 666);
		},


		recordTimeFormClick() {
			if (dayjs().hour() < 7) {
				this.defaultDate = dayjs().subtract(1, 'day').format('YYYY-MM-DD');
			}
			this.$nextTick(() => {
				this.show.calendar = true;
			});
		},
		calendarConfirm(e) {
			if (!uni.$u.test.isEmpty(e) && uni.$u.test.array(e)) {
				this.formData.recordTimeDT = e[0];
			}
			this.show.calendar = false;
		},
		calendarClose() {
			this.show.calendar = false;
		},
		chip1InfoBlur() {
			if (uni.$u.test.isEmpty(this.formData.chip1Info)) return;
			getUSMChipQRType()
				.then((res) => {
					this.show.chipInfo = true;
					this.qrCode.chipPnFrom = res.data.pnFrom;
					this.qrCode.chipPnLength = res.data.pnLength;

					this.echo.chip1ProductCode = this.formData.chip1Info.substr(this.qrCode.chipPnFrom, this.qrCode.chipPnLength);
				})
				.catch((err) => {
					uni.showToast({
						title: err.msg || err.message || '服务器异常',
						icon: 'error'
					});
				});
		},
		chip1InfoClear() {
			this.echo.chip1LotNo = '';
			this.echo.chip1ProductCode = '';
		},
		chip2InfoBlur() {
			if (uni.$u.test.isEmpty(this.formData.chip2Info)) return;
			if (this.qrCode.chipPnFrom >= 0 && this.qrCode.chipPnLength > 0) {
				this.echo.chip2ProductCode = this.formData.chip2Info.substr(this.qrCode.chipPnFrom, this.qrCode.chipPnLength);
				return;
			}
			getUSMChipQRType()
				.then((res) => {
					this.qrCode.chipPnFrom = res.data.pnFrom;
					this.qrCode.chipPnLength = res.data.pnLength;

					this.echo.chip2ProductCode = this.formData.chip2Info.substr(this.qrCode.chipPnFrom, this.qrCode.chipPnLength);
				})
				.catch((err) => {
					uni.showToast({
						title: err.msg || err.message || '服务器异常',
						icon: 'error'
					});
				});
		},
		chip2InfoClear() {
			this.echo.chip2LotNo = '';
			this.echo.chip2ProductCode = '';
		},
		chip3InfoBlur() {
			if (uni.$u.test.isEmpty(this.formData.chip3Info)) return;
			if (this.qrCode.chipPnFrom >= 0 && this.qrCode.chipPnLength > 0) {
				this.echo.chip3ProductCode = this.formData.chip3Info.substr(this.qrCode.chipPnFrom, this.qrCode.chipPnLength);
				return;
			}
			getUSMChipQRType()
				.then((res) => {
					this.qrCode.chipPnFrom = res.data.pnFrom;
					this.qrCode.chipPnLength = res.data.pnLength;

					this.echo.chip3ProductCode = this.formData.chip3Info.substr(this.qrCode.chipPnFrom, this.qrCode.chipPnLength);
				})
				.catch((err) => {
					uni.showToast({
						title: err.msg || err.message || '服务器异常',
						icon: 'error'
					});
				});
		},
		chip3InfoClear() {
			this.echo.chip3LotNo = '';
			this.echo.chip3ProductCode = '';
		},
		formSubmit() {
			const _this = this;
			// 数据验证
			this.$refs.form
				.validate()
				.then((res) => {
					//成功时返回true
					uni.showModal({
						title: '上传',
						content: '确认数据上传?',
						success: (res) => {
							if (res.confirm) {
								const uploadData = {
									recordID:_this.prePageOption.recordID,
									machineNo: _this.formData.machineNo,
									lotNo: _this.echo.lotNo,
									productCode: _this.echo.productCode,
									recordTimeDT: _this.formData.recordTimeDT,
									chipRecord1: _this.echo.chip1ProductCode.trim(),
									chipRecord2: _this.echo.chip2ProductCode.trim(),
									chipRecord3: _this.echo.chip3ProductCode.trim(),
									okCount1: _this.formData.okCount1 * 1,
									okCount2: _this.formData.okCount2 * 1,
									okCount3: _this.formData.okCount3 * 1,
									okCount4: _this.formData.okCount4 * 1
								};
								this.submitBtn.loading = true;
								uptUsmZlRecord(uploadData)
									.then((res) => {
										uni.showToast({
											title: '提交成功',
											duration: 2000
										});
										uni.$u.sleep(2000).then(() => {
											this.submitBtn.loading = false;
											uni.navigateBack()
										});
									})
									.catch((err) => {
										uni.showToast({
											title: err.msg || ' 服务器异常',
											icon: 'error',
											duration: 2000
										});
										uni.$u.sleep(2000).then(() => {
											this.submitBtn.loading = false;
										});
									});
							}
						}
					});
				})
				.catch((err) => {
					uni.showToast({
						title: '提交数据错误',
						icon: 'error',
						duration: 2000
					});
				});
		},
		formDel(){
			const _this=this
			uni.showModal({
				title:'删除',
				content:'确认删除数据??',
				success:(res)=>{
					if(res.confirm){
						const delData = {
							recordID:_this.prePageOption.recordID
						}
						delUsmZlRecord(delData)
							.then(res=>{
								uni.showToast({
									title:'删除成功',
									duration:2000
								})
								uni.$u.sleep(2000).then(()=>{
									uni.navigateBack()
								})
							})
							.catch(err=>{
								uni.showToast({
									title:err.msg || err.message || '服务器异常',
									icon:'error',
									duration:2000
								})
		
							})
					}
				}
			})
		},
		formReset() {
			this.initData();
		},
		initData() {
			uni.reLaunch({
				url: '/pages/U-ZL-statistial-input/U-ZL-statistial-input'
			});
		}
	}
};
</script>

<style scoped lang="scss">
.echo {
	margin-left: 80px;
}
.preWhite {
	white-space: pre;
}
.ngEcho {
	padding: 10px 0;
}
</style>
